﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery仿QQ相册图片查看-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="plugins/Gallery/css/style.css" media="all" />
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<style>
html,body {
	width:100%;
	height:100%;
	position:relative;
}
* {
	padding:0;
	margin:0;
	list-style:none;
}
li img {
	width:200px;
	height:160px;
	margin-left:10px;
}
.wrap li {
	width:200px;
	height:158px;
	margin-left:10px;
	margin-top:10px;
	float:left;
}
.wrap {
	width:630px;
	height:340px;
	padding-top:50px;
	padding-left:50px;
}
.mask {
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	position:fixed;
    z-index:99999;
	top:0;
}
.mask img {
	width:600px;
	height:480px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}
.btnl {
	font-size:100px;
	width:40px;
	height:70px;
	left:10px;
	top:0;
	bottom:0;
	margin:auto;
	position:absolute;
}
.btnr {
	font-size:100px;
	width:40px;
	height:70px;
	right:10px;
	top:0;
	bottom:0;
	margin:auto;
	position:absolute;
}
.close {
	width:30px;
	height:30px;
	position:absolute;
	top:10px;
	right:20px;
	font-size:50px;
}
</style>
</head>
<body>
    <div id="effect-6" class="effects clearfix">
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
    </div>
<ul class="wrap">

</ul>
<div class="mask">
  <div class="btnl"> < </div>
  <div class="btnr"> > </div>
  <div class="close"> × </div>
  <img src="img/1.jpg" alt="" /> 
</div><script type="text/javascript" src="plugins/Gallery/js/modernizr.js"></script>
    <script>
        $(function () {
            if (Modernizr.touch) {

                // show the close overlay button
                //$(".close-overlay").removeClass("hidden");
                // handle the adding of hover class when clicked
                $(".img").click(function (e) {
                    if (!$(this).hasClass("hover")) {
                        $(this).addClass("hover");
                    }
                });
                // handle the closing of the overlay
                $(".close-overlay").click(function (e) {;
                    e.preventDefault();
                    e.stopPropagation();
                    if ($(this).closest(".img").hasClass("hover")) {
                        $(this).closest(".img").removeClass("hover");
                    }
                });
            } else {
                // handle the mouseenter functionality
                $(".img").mouseenter(function () {
                    $(this).addClass("hover");
                })
                // handle the mouseleave functionality
                .mouseleave(function () {
                    $(this).removeClass("hover");
                });
                $(".close-overlay").click(function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    if ($(this).closest(".img").hasClass("hover")) {
                        $(this).closest(".img").removeClass("hover");
                    }
                });
                $(".img").click(function (e) {
                    
                    mask.show();
                    mask.find('img').prop('src', $(this).find("img").attr('src'));
                    index = $(this).index();
                    if (!$(this).hasClass("hover")) {
                        $(this).addClass("hover");
                    }
                });
            }



            var lis = $('.img'),
            index = 0,
            mask = $('.mask'),
            close = $(".close"),
            btnl = $(".btnl"),
            btnr = $(".btnr");
		
		/*console.log(lis)*/
		mask.hide();
        lis.on('click',function(){
			var imgP=$(this).find('img').prop('src');
			mask.show();
			mask.find('img').prop('src',imgP);
			index=$(this).index();
		
		})
        close.on('click',function(){
			mask.hide();
		})
		btnr.on('click',function(){
			index++;
			if(index==lis.length){
				index=0;
			}
			console.log(index);
			var imgP=lis.eq(index).find('img').prop('src');
			$('img',mask).fadeOut(200).prop('src',imgP).fadeIn(200);
		})
		
		btnl.on('click',function(){
			index--;
			if(index<0){
				index=lis.length-1;
			}
			console.log(lis.eq(index).find('img').prop('src'));
			var imgP=lis.eq(index).find('img').prop('src');
			$('img',mask).fadeOut(900).prop('src',imgP).fadeIn(900);
		})
	
	$(document).on('dbclick',mask,function(){
		/*var obj=e.target;
		$(!$(obj).is('img')&&!$(obj).is('btnl')&&!$(obj).is('btnr')&&!$(obj).is('obj'))*/
		mask.hide()
	})
})

    
    </script>
</body>
</html>
